﻿<!DOCTYPE html>
<html>
<head>
<!--
	Copyright (c) 2015-2018 Jean-Marc VIGLINO, 
	released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
	<title>ol-ext: Scale control</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<meta name="description" content="ol/control/Scale add a scale control to the map." />
	<meta name="keywords" content="ol3, control, scale, ppi" />

	<link rel="stylesheet" href="../style.css" />

	<!-- jQuery -->
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

	<!-- Openlayers -->
    <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />
	<script type="text/javascript" src="https://openlayers.org/en/latest/build/ol.js"></script>
	<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
	
	<!-- ol-ext -->
    <link rel="stylesheet" href="../../dist/ol-ext.css" />
	<script type="text/javascript" src="../../dist/ol-ext.js"></script>

</head>
<body >
  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

	<a href="../../index.html">
		<h1>ol-ext: Scale control</h1>
	</a>
	<div class="info">
    <p>
  		<i>ol.control.Scale</i> displays the scale of the map in a control. 
		<br/>
			<b>NB:</b> Some projections and specialy the default Mercator projection preserve angles but not the distance. 
			This means that the scale is not the same on the whole map :(
			<br/>
			The control display the projection on the center on the map and it may change when moving on the earth.
			Just move from equator to the pole and see the ScaleLine length growing. 
			<br/>
			<b>NB:</b> The control needs to know the <a href="https://en.wikipedia.org/wiki/Pixel_density">screen PPI</a> (or DPI) to calculate the right scale.
			Be aware the PPI depends on the device (screen, printer) your are using and may be quite different form one to another depending on the resolution of the device.
			<br/>
			The default value is 96.
    </p>
		<ul><li>
			<i>ol/control/Scale.setScale()</i> function can change the current map scale
		</li><li>
		 	The <i>editable</i> option is used to make the scale input editable.
		</li></ul>
	</div>

	<!-- Map div -->
	<div id="map" style="width:600px; height:400px;"></div>

	<div class="options" >
		<ul><li>
			Screen ppi: <input id="ppi" type="number" onchange="ctrl.set('ppi',this.value); ctrl.setScale()" value='96' />
		</li><li>
      or your screen diagonal:
      <select onchange="setDiagonal(this.value);">
        <option value=0>Diagonal</option>
        <option value=7>7"</option>
        <option value=11.6>11.6"</option>
        <option value=13.3>13.3"</option>
        <option value=14>14"</option>
        <option value=15.6>15.6"</option>
        <option value=17.3>17.3"</option>
        <option value=21>21"</option>
        <option value=24>24"</option>
        <option value=27>27"</option>
      </select>
    </li></ul>
	</div>

	<script type="text/javascript">
		// Layers
		var stamen = new ol.layer.Tile({
      source: new ol.source.Stamen({ layer: 'watercolor' }) 
    });

		// The map
		var map = new ol.Map
			({	target: 'map',
				view: new ol.View
				({	zoom: 14,
					center: [270701, 6247637]
				}),
				layers: [ stamen ]
			});

		// Control
		var ctrl = new ol.control.Scale({	});
		map.addControl(ctrl);
    map.addControl(new ol.control.ScaleLine());
    
    function setDiagonal(val) {
      var res = Math.sqrt(window.screen.width*window.screen.width+window.screen.height*window.screen.height)/val; 
      res = Math.round(res);
      $('#ppi').val(res);
      ctrl.set('ppi', res); 
      ctrl.setScale()
    }

	</script>

</body>
</html>